<script lang="jsx" setup>
import { ref } from 'vue';
import CenterTopPie from './center-top-pie.vue';

const count = ref(30500);
</script>

<template>
  <div class="h-full w-full flex">
    <div class="sqzs ml-0.2rem h-full w-50%">
      <div class="title text-white">业绩总览</div>
      <div class="count text-white">
        <CountTo :start-value="0" :end-value="count" class="number dark:text-dark" />
        <span class="unit">万</span>
      </div>
    </div>
    <div class="h-full w-50% flex justify-between">
      <div class="pie-chart h-full w-33.33333%">
        <div class="title">标题</div>
        <div class="chart">
          <CenterTopPie :value="81" color="#eaff00"></CenterTopPie>
        </div>
      </div>
      <div class="pie-chart h-full w-33.33333%">
        <div class="title">标题</div>
        <div class="chart">
          <CenterTopPie :value="33" color="#ea4d4d"></CenterTopPie>
        </div>
      </div>
      <div class="pie-chart h-full w-33.33333%">
        <div class="title">标题</div>
        <div class="chart">
          <CenterTopPie :value="22" color="#395ee6"></CenterTopPie>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.sqzs {
  .title {
    padding: 0.2rem 0 0.1rem 0;
    font-size: 0.22rem;
  }
  .count {
    height: calc(100% - 0.65rem);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    color: #fef000;
    font-weight: normal;
    letter-spacing: 2px;
    font-size: 0.5rem;
    justify-content: center;
    padding-bottom: 0.05rem;

    .number {
      font-size: 0.8rem;
      font-family: electronicFont;
    }
  }
}

.pie-chart {
  .title {
    text-align: center;
    color: white;
    font-size: 0.16rem;
    padding: 0.3rem 0 0.02rem 0;
  }
  .chart {
    height: calc(100% - 0.5rem);
    position: relative;
  }
}
</style>
